<template>
    <ElConfigProvider :locale="locale">
        <div :style="{width:width+'px'}" class="date_range">
            <el-date-picker clearable format="YYYY-MM-DD" value-format="YYYY-MM-DD" v-model="innerValue" type="daterange" 
            :start-placeholder="sph" :end-placeholder="eph" />
        </div>
    </ElConfigProvider>
</template>

<script setup>
    import { ref,watch,computed } from 'vue'
    // import zhCn from 'element-plus/lib/locale/lang/zh-cn'
    import zhCn from 'element-plus/es/locale/lang/zh-cn'
    const locale = ref(zhCn); //日期框必须要用这个包，所以很麻烦，写个组件封装起来

    const emit = defineEmits(['update:start','update:end','change']) //此处要完全对应，采用固定的update:prop属性
    const props = defineProps({
        start: { type: String, require: true },
        end: { type: String, require: true },
        sph: { type: String, default: "选择日期" },
        eph: { type: String, default: "选择日期" },
        width:  { type: Number, default: 226 },
    })
    // let obj = reactive({
    //     innerValue: [props.start, props.end],
    // })
    let innerValue = computed({
        get() { return [props.start, props.end] },
        set(val) {
            if(val){
                // props.start = val[0];
                // props.end = val[1];
                emit('update:start', val[0])
                emit('update:end', val[1])
                emit('change', val)
            }else{
                // props.start = null
                // props.end = null
                emit('update:start', null)
                emit('update:end', null)
                emit('change', [])
            }
        }
    })
    // watch(
    //     () => props.start,
    //     (val) => {
    //         emit('update:start', val) //组件里的props是只读的，要想做成双向绑定，必须要加watch事件，并且抛出指定的update:prop属性
    //         //外面写法也有变化，不能:value=""，要改为v-model:value=""，就能得到更新后的值
    //     }
    // )
</script>

<style scoped lang="scss">
    .date_range { display: flex; }
</style>